<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">我的视频</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <form>
                        <div class="form-row align-items-center mb-3">
                            <div class="col-auto">
                                <select class="form-control form-control-sm selection">
                                    <option value="0">请选择课程</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-control form-control-sm selection">
                                    <option value=-2>请选择状态</option>
                                    <option value="0">待审核</option>
                                    <option value="-1">审核未通过</option>
                                    <option value="1">审核通过</option>
                                    <option value="2">视频上架</option>
                                    <option value="3">视频下架</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-info btn-sm" onclick="search()">搜索</button>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse"
                                    data-target="#vedioupload" id="addNew" onclick="showCourse()">添加新视频</button>
                            </div>
                        </div>
                    </form>
                    <div class="collapse mb-4" id="vedioupload">
                        <div class="card card-body">
                            <form>
                                <div class="form-group">
                                    <label for="course">所属学科</label>
                                    <select class="form-control" id="course">
                                        <option value="0">请选择课程</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="info">课程介绍</label>
                                    <textarea rows="10" class="form-control" id="info"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="info">视频文件</label>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="customFile">
                                        <label class="custom-file-label" for="customFile">选择视频</label>
                                    </div>
                                </div>
                                <div class="progress mb-2">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%;">0%</div>
                                </div>
                                <button type="button" class="btn btn-primary btn-sm float-right" onclick="addVideo()">提交上传</button>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-align">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="col-min-90">视频编号</th>
                                    <th class="col-min-90">所属学科</th>
                                    <th>视频简介</th>
                                    <th class="col-min-120">课程视频</th>
                                    <th class="col-min-120">视频状态</th>
                                    <th class="col-min-120">操作</th>
                                </tr>
                            </thead>
                            <tbody id="showBody">
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 视频简介更新 -->
<div class="modal fade" id="vedioInfoUpdate" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">视频简介更新</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <textarea rows="5" class="form-control" id="info1"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update(this)">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 视频简介更新-结束 -->
<script>
//页面刷新
function refresh(){
    $.ajax({
            url:"../videoCourse_stu/server/myVedioPage.php",
            type:"post",
        })
    .done((result)=>{
            //表格展示
            var str="";
            $("#showBody").html("");
            for (const p of result) {
                //下拉框1

                //下拉框2

                //表格
                var status="";
                var show="";
                if (p.status==-1) {//禁用  status为视频状态，show为按钮展示
                    status=`<td class="text-danger" >审核未通过</td>`;
                    show=`<button type="button" class="btn btn-primary btn-sm" onclick="examine1(this,0)">提交审核</button>`;
                }else if(p.status==0){//审核状态
                    status=`<td class="text-primary">待审核</td>`;
                    show="";

                }else if(p.status==1){//通过
                    status=`<td class="text-info">审核通过</td>`;
                    show=`<button type="button" class="btn btn-success btn-sm" onclick="examine1(this,2)">上架</button>`;

                }else if(p.status==2){//上架
                    status=`<td class="text-success">视频上架</td>`;
                    show=`<button type="button" class="btn btn-warning btn-sm" onclick="examine1(this,3)">下架</button>`;

                }else{//下架  --3
                    status=`<td class="text-warning">视屏下架</td>`;
                    show=`<button type="button" class="btn btn-success btn-sm" onclick="examine1(this,2)">上架</button>`;

                }
                str+=`<tr>
                        <th>${p.videoId}</th>
                        <td>${p.courseName}</td>
                        <td><pre class="mb-0">${p.videoInfo}</pre>
                            <button type="button" class="btn btn-link btn-sm" data-toggle="modal" data-target="#vedioInfoUpdate"  onclick="use(this)">更新</button>
                            </td>
                        <th>
                            <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm" >播放/下载</a>
                        </th>
                        ${status}
                        <td>
                            ${show}
                        </td>
                    </tr>`;
            }
            $("#showBody").append(str);
        });
    }   
    
refresh();
//下拉框展示
function showSel() {
    $(".selection")[0].length=1;
    $.ajax({
        url:"../videoCourse_stu/server/myVedioPageShow.php",
        type:"post"
    }).done((result)=>{
        var str="";
        for (const p of result) {
            str+=`<option value="${p.courseId}">${p.courseName}</option>`;
        }
        $(".selection:eq(0)").append(str);
    })
}
showSel();

//搜索按钮--未完成
function search() {
    // console.log($(".selection:eq(0)").val());
    // console.log($(".selection:eq(1)").val());
    var courseId=$(".selection:eq(0)").val();
    var status=$(".selection:eq(1)").val();
    $.ajax({
        url:"../videoCourse_stu/server/myVedioPageSearch.php",
        type:"post",
        data:{
            courseId,
            status
        },
        dataType:"json"
    }).done((result)=>{
       if (result.success) {
           toastr.warning("搜索不存在");
       }else{
        var str="";
        $("#showBody").html("");
        for (const p of result) {
            //表格
            var status="";
            var show="";
            if (p.status==-1) {//禁用  status为视频状态，show为按钮展示
                status=`<td class="text-danger" >审核未通过</td>`;
                show=`<button type="button" class="btn btn-primary btn-sm" onclick="examine1(this,0)">提交审核</button>`;
            }else if(p.status==0){//审核状态
                status=`<td class="text-primary">待审核</td>`;
                show="";

            }else if(p.status==1){//通过
                status=`<td class="text-info">审核通过</td>`;
                show=`<button type="button" class="btn btn-success btn-sm" onclick="examine1(this,2)">上架</button>`;

            }else if(p.status==2){//上架
                status=`<td class="text-success">视频上架</td>`;
                show=`<button type="button" class="btn btn-warning btn-sm" onclick="examine1(this,3)">下架</button>`;

            }else{//下架  --3
                status=`<td class="text-warning">视屏下架</td>`;
                show=`<button type="button" class="btn btn-success btn-sm" onclick="examine1(this,2)">上架</button>`;

            }
            str+=`<tr>
                    <th>${p.videoId}</th>
                    <td>${p.courseName}</td>
                    <td><pre class="mb-0">${p.videoInfo}</pre>
                        <button type="button" class="btn btn-link btn-sm" data-toggle="modal" data-target="#vedioInfoUpdate"  onclick="use(this)">更新</button>
                        </td>
                    <th>
                        <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm" >播放/下载</a>
                    </th>
                    ${status}
                    <td>
                        ${show}
                    </td>
                </tr>`;
        }
        $("#showBody").append(str);
       }
    })
}

//所属课程渲染
function showCourse() {
    $("#course")[0].length=1;
    $.ajax({
        url:"../videoCourse_stu/server/myVedioPageShow.php",
        type:"post"
    }).done((result)=>{
        var str="";
        for (const p of result) {
            str+=`<option value="${p.courseId}">${p.courseName}</option>`;
        }
        $("#course").append(str);
    })
}
//添加按钮
function addVideo() {
    if ($("#course").val()==0) {
        toastr.error("请选择课程");
    }else{
        var courseId=$("#course").val();
    }
    var videoInfo=$("#info").val();
    var videoPath=$("#cuvideoPathtomFile").val();
    $.ajax({
        url:"../videoCourse_stu/server/myVedioPageAdd.php",
        type:"post",
        data:{
            courseId,
            videoInfo,
            videoPath
        }
    }).done((result)=>{
        if (!result.success) {
            toastr.error("修改失败")
        }
    });
    refresh();

    $("#addNew").click();//与添加视频框效果一致
}

//传递id值
var newId;//承接弹出层的id
function use(obj) {
    newId=$(obj).parents()[1].children[0].innerHTML;
}
//更新按钮
function update(obj) {
    var id=newId;
    var videoInfo=$("#info1").val();
    $.ajax({
        url:"../videoCourse_stu/server/myVedioPageInfo.php",
        type:"post",
        data:{
            id,
            videoInfo
        }
    }).done((result)=>{
        if (!result.success) {
            toastr.error("修改失败")
        }
    });
    refresh();
    $(obj).attr("data-dismiss","modal");
}
//审核按钮  共用 
function examine1(obj,num) {
    var id=$(obj).parents()[1].children[0].innerHTML;
    // var id=;
    var status=num;
    $.ajax({
        url:"../videoCourse_stu/server/vedioPageExamine.php",
        type:"post",
        data:{
            id,
            status
        }
    }).done((result)=>{
            
            if (!result.success) {
                toastr.error("修改失败")
            }
        });
        refresh();
}
</script>